<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户列表页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body style="padding:15px;">
        <div class="form-group">
            <button class="btn btn-info" id="add">新增</button>
            <button class="btn btn-info" id="del">删除</button>
            <button class="btn btn-info" id="update">编辑</button>
            <button class="btn btn-info" id="select">查询</button>
            <input type="text" placeholder="按工号查询" id="selId" style="width:90px;">
            <input type="text" placeholder="按姓名查询" id="selName" style="width:90px;"> 
        </div>
    <form action="#">
      <table class="table table-responsive">
        <thead>
            <tr>
                <th><input type="checkbox" onchange="quan(this)"> 序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <br>
        <tbody>
            <tr class="info">
                <td><input type="checkbox" name="check"></td>
                <td>1001</td>
                <td>张三</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1991-1-1</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox" name="check"></td>
                <td>1002</td>
                <td>李四</td>
                <td>男</td>
                <td>1234</td>
                <td>28</td>
                <td>199-2-2</td>
            </tr>
            <tr class="info">
                <td><input type="checkbox" name="check"></td>
                <td>1003</td>
                <td>王五</td>
                <td>女</td>
                <td>1234</td>
                <td>18</td>
                <td>1993-6-1</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox" name="check"></td>
                <td>1004</td>
                <td>赵六</td>
                <td>女</td>
                <td>1234</td>
                <td>30</td>
                <td>1996-8-1</td>
            </tr>
        </tbody>
     </table> 
    </form>

    <script>
        $(document).ready( load() );//除了load()，其他方法先执行
        
        //1.全选功能
        function quan(all){
            var arr = document.getElementsByName("check");
            for(var i=0; i<arr.length; i++){
                 arr[i].checked = all.checked; //将全选框的状态，赋值给每一个复选框
            }
        }

        //2.新增功能
        var index = 1;
        $("#add").click(function add(){
            index++;//新增一行，索引加1
            //2.1 获取新的tr\td标签
            var newtr = $("<tr></tr>");
            var newtd = $("<td><input type='checkbox' name='check'></td><td></td><td></td><td></td><td></td><td></td><td></td>");
            //2.2 将新的tr标签添加到最后一个tr后面
            $("tr:last").after(newtr);
            //2.3 添加td标签（子节点）
            $("tr:last").append(newtd);
            //2.4 隔行变色
            if(index % 2 == 0){
                $("tr:last").attr("class","info");
            }else{
                $("tr:last").attr("class","warning");
            }
            newload(newtr) //每次新增，加载一下
        });

        //3.为前4行固定的tr标签绑定事件
        function load(){
            //3.1 去除表头：slice(1),下标从1开始，遍历每一行
            $("tr").slice(1).each(function(){
                var old = this;//便于重新找到第一列
                //3.2 遍历每一列，去除第一列的复选框
                $(this).children().slice(1).each(function(){//当前this表示当前的tr
                    //3.3 遍历td,找到input标签（复选框）
                    $( $(old).children()[0] ).children().each(function(){//第二个children为input标签
                        //3.4 如果子节点的类型是复选框类型，则执行
                        if(this.type == "checkbox"){
                             if(!this.checked){
                                 this.checked = true;
                                 //console.log("哈哈哈");
                             }else{
                                 this.checked = false;
                                 //console.log("嘿嘿嘿");
                             }
                        }
                    });
                });
            });
        }

        //4.遍历新增的tr，给新增的tr绑定click事件
        function newload(newtr){
            $(newtr).children().slice(1).click(function(){
                var td = $(newtr).children()[0];//找到第一个td
                var input = $(td).children()[0];//找到第一个td中的input
                if(!input.checked){
                    input.checked = true;
                }else{
                    input.checked = false;
                }
            });
        }

        //5.删除功能
        $("#del").click(function(){
           //5.1 获取选中的行进行删除操作
           $("tr").slice(1).each(function(){
              var old = this;//用于标记当前tr
              var td = $(this).children()[0]; //找到第一个td
              var input = $(td).children()[0]; //找到第一个td中的第一个标签input
              //5.2 如果当前行中复选框被勾选了，则删除
              if(input.checked){
                   //5.3 删除节点
                   $(old).remove();
              }
           });
        });

        //6.编辑功能
        $("#update").click(function(){
            //6.1 获取选中的行进行编辑操作
            $("tr").slice(1).each(function(){
                var td = $(this).children()[0]; //找到第一个td
                var input = $(td).children()[0]; //找到第一个td中的第一个标签input 
                if(input.checked){
                     $(this).children().slice(1).attr("contenteditable","true");
                }
            });
        });

        //7.查询功能
        $("#select").click(function(){
            //7.1 获取输入框的值
            var id = $("#selId").val();
            var name = $("#selName").val();
            //7.2 遍历每一行获取对应的id值和name值
            $("tr").slice(1).each(function(){
                 var uid = $( $(this).children()[1] ).text(); //id值
                 var uname = $( $(this).children()[2] ).text(); //name值
                 //7.3 判断获取到的值和输入的值是否相等
                 if(id ==  uid || name == uname){
                     $(this).show(); //显示出查询的结果
                 }else{
                     if(uid == "" || uname == ""){
                        $(this).hide(); //隐藏
                     }
                 }
            });
        });

         
    </script>
</body>
</html>